<div fxLayout="row" fxLayoutAlign="start center" >
    <!-- <ngm-smart-filter [dataSettings]="dataSettings"
        [options]="smartFilterOptions"
        [appearance]="appearance"
        [(ngModel)]="slicer"
        (ngModelChange)="onSlicerChange($event)">
    </ngm-smart-filter> -->

    <ngm-member-tree-select label="Product" [dataSettings]="dataSettings"
        [dimension]="productDimension"
        [appearance]="appearance"
        [options]="{
            autocomplete: true,
            initialLevel: 1
        }"
        [(ngModel)]="productSlicer"
        (ngModelChange)="onSlicerChange($event)"
    ></ngm-member-tree-select>
</div>

<div fxFlex="100" fxLayout="row wrap" fxLayoutAlign="start start" fxLayoutGap="1rem grid">
    <!-- <div fxFlex="calc(33% - 1rem)">
        <ngm-analytical-card displayDensity="compact"
            [title]="card1.title"
            [dataSettings]="card1.dataSettings"
            [chartSettings]="card1.chartSettings"
            [chartOptions]="card1.chartOptions"
            [options]="{
            }"
        ></ngm-analytical-card>
    </div> -->

    <!-- <div *ngFor="let card of cards" fxFlex="calc(33% - 1rem)">
        <ngm-analytical-card displayDensity="compact"
            [title]="card.title"
            [dataSettings]="card.dataSettings"
            [chartSettings]="card.chartSettings"
            [chartOptions]="card.chartOptions"
            [options]="{
            }"
        ></ngm-analytical-card>
    </div>
 -->
 
    <ngm-analytical-grid class="flex-1"
        [appearance]="{displayDensity: DisplayDensity.compact}"
        [dataSettings]="dataSettings"
        [options]="{
            strip: true,
            grid: true,
            initialRowLevel: 1,
            initialColumnLevel: 1
        }">
    </ngm-analytical-grid>

    <!-- <ngm-analytical-grid fxFlex="100" [appearance]="{displayDensity: DisplayDensity.compact}"
        [dataSettings]="dataSettings2"
        [options]="{
            strip: true,
            grid: true
        }">
    </ngm-analytical-grid> -->
</div>

<!-- 
<div>
    {{dbCatalogs$ | async | json}}
</div>

<div>
    {{dbTables$ | async | json}}
</div> -->
